<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo" class="one" title="hello" name="box" data-txt="这是一个div" asd="zxc"></div>
</body>
<script>
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName() 

    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    var box = document.getElementsByName("box")[0];
    console.log(box);

    // document.querySelector
    // document.querySelectorAll

    // box.getAttributeNode("class");   // class="one"
    // nodeName
    // nodeValue

    // box.setAttribute(key,val);
    // box.getAttribute(key);
    // box.removeAttribute(key);

    // 可以用于 设置 获取 删除  自定义属性

    // 层级关系
    // parentNode  parentElement
    // childNode   children
    // firstChild   firstElementChild
    // lastChild   lastElementChild
    // previousSibling    previousElementSibling
    // nextSibling    nextElementSibling

    // 节点的增删改查

    // 节点新增
    // document.createElement()

    // parent.appendChild()
    // parent.append()
    // parent.prepend()

    // parent.insertBefore(newNode,oldNode)

    // remove()
    // parent.removeChild(node)

    // parent.replaceChild(newNode,oldNode)



</script>

</html>